<template>
  <div>
    姓名 <input type="text" placeholder="请输入需要搜索的姓名" v-model="queryInfo.query.mg_name">
    手机 <input type="text" placeholder="请输入需要搜索的手机号码" v-model="queryInfo.query.mg_mobile">
    邮箱 <input type="text" placeholder="请输入需要搜索的邮箱" v-model="queryInfo.query.mg_email">
    ID <select v-model="queryInfo.query.mg_id">
      <option value="500">500</option>
      <option value="502">502</option>
      <option value="509">509</option>
      <option value="510">510</option>
      <option value="511">511</option>
      <option value="519">519</option>
    </select>
    <button @click="getUserList">查询</button>
    <table>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>创建时间</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>状态</th>
        <th>管理员角色</th>
      </tr>
      <tr v-for="(item, index) in userList" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.create_time}}</td>
        <td>{{item.mobile}}</td>
        <td>{{item.email}}</td>
        <td>{{item.mg_state}}</td>
        <td>{{item.role_name}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      queryInfo: {
        query: {
          mg_name: '',
          mg_id: '',
          mg_email: '',
          mg_mobile: ''
        },
        pagenum: 1,
        pagesize: 10
      },
      userList: []
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取用户列表
    async getUserList () {
      const result = await this.$http.get('users', { params: this.queryInfo })
      const res = result.data
      console.log(res)
      console.log(result)
      // console.log(this.$http)
      // if(res.meta.status !== 200) return this.$message.error('获取用户列表失败')
      this.userList = res.data.users
      // this.total = res.data.total
      // //重置当前页码
      // this.queryInfo.pagenum = 1
    }
  }
}
</script>
<style scoped>
  th,td{
    border: 1px solid red;
    padding: 0 5px;
    min-width: 50px;
  }
  table {
    border-collapse: collapse;
    margin-top: 10px;
    text-align: center;
  }
  select {
    margin: 5px;
  }
  button {
    margin: 5px;
  }
  input {
    margin: 5px;
    min-width: 170px;
  }
</style>
